
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon>
        <el-form-item label="商品分类" prop="productCategoryId">
            <el-cascader v-model="ruleForm.productCategoryId" :options="options" :props="props" clearable />
        </el-form-item>
        <el-form-item label="商品规格">
            <el-input disabled />
            <section class="row">
                <el-table :data="[]" stripe style="width: 100%" border :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }">
                    <el-table-column prop="date" label="销售价格" />
                    <el-table-column prop="name" label="商品库存" />
                    <el-table-column prop="address" label="库存预警值" />
                    <el-table-column prop="address" label="SKU编号" width="200" />
                    <el-table-column prop="address" label="操作" />
                </el-table>
            </section>

            <el-button type="primary">刷新列表</el-button>
            <el-button type="primary">同步价格</el-button>
            <el-button type="primary">同步库存</el-button>
        </el-form-item>
        <el-form-item label="商品参数">
            <el-input disabled />
        </el-form-item>
        <el-form-item label="商品相册">
            <el-upload action="http://120.24.64.5:8088/mall-admin/minio/upload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width:100%" />
            </el-dialog>
        </el-form-item>
        <el-form-item label="规格参数">
            <el-tabs type="card" class="demo-tabs">
                <el-tab-pane label="电脑端详情">
                    <TEditor ref="editor" v-model="ruleForm.content" />
                </el-tab-pane>
                <el-tab-pane label="移动端详情">Role</el-tab-pane>
            </el-tabs>
        </el-form-item>

    </el-form>

    <p style="text-align:center">
        <el-button size="large" @click="emit('next', 1)">上一步, 填写商品属性</el-button>
        <el-button type="primary" size="large" @click="next">下一步, 填写商品关联</el-button>
    </p>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import * as http from '@/request/api'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
let options = ref<proCategoryListRes[]>([])
const props = {
    value: "id", label: "name"
}
// 获取商品分类列表
async function getproCategoryList() {
    let res = await http.commodity.proCategoryListAll({
        pageNum: 1,
        pageSize: 100
    })
    options.value = res.data.list
}
getproCategoryList()

const emit = defineEmits(['next'])
const ruleForm = reactive<Indexable>({
    keyword: '',
    productSn: '',
    productCategoryId: '',
    brandId: '',
    publishStatus: '',
    verifyStatus: '',
    content: ''
})


const next = () => {
    emit('next', 3)
}

// 查看图片
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
</script>
    
<style>
.row {
    margin: 10px 0;
    width: 100%
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}
</style>